<!-- 订单item 	-->
<template>
	<view class="order-item-container">
		<view class="order-item-wrap"
			:style="scene == 'childNow' || scene == 'childHistory' ? 'margin-bottom:60rpx;padding:0 32rpx' :''"
			v-for="(item,index) in datas" :key="index" @click="handleDetail(item)">
			<view class="head-row" v-if="scene == 'order' || scene == 'history'">
				<view class="product-img">
					<image :src="item.strategyIconUrl" mode="aspectFill"></image>
				</view>
				<view class="product-name" style="margin-left: 16rpx;">{{item.strategyName || "--"}}</view>
			</view>
			<view class="content-row"
				:style="scene == 'childNow' || scene == 'childHistory' ? 'margin:0;padding:0' :''">
				<view class="account-row" :style="scene == 'childHistory' ? '' : ''">
					<template v-if="scene == 'childNow' || scene == 'childHistory'">
						<view class="user-avatar" style="margin-right: 16rpx;">
							<image src="@/static/logo.png" mode="aspectFill"></image>
						</view>
					</template>
					<view class="account-content">
						<template v-if="scene == 'childNow' || scene == 'childHistory'">
							<view class="product-name" style="margin-bottom: 8rpx;">{{item.strategyName || "--"}}</view>
						</template>

						<view class="account-txt">{{item.subAccountName || "--"}}</view>
						<template v-if="scene == 'history' || scene == 'childHistory'">
							<view class="create-time">开始日期 {{momentFormat(item.createTime) || "--"}}</view>
							<view class="create-time">结束日期 {{momentFormat(item.endTime) || "--"}}</view>
						</template>
						<template v-else>
							<view class="create-time">创建时间 {{momentFormat(item.createTime) || "--"}}</view>
						</template>
					</view>
				</view>
				<view class="target-row">
					<view class="target-item">
						<view class="target-num target-num1">
							<template v-if="item.returnRate">
								{{item.returnRate >= 0 ? `+${item.returnRate}%` : `${item.returnRate}%` }}
							</template>
							<template v-else>
								0%
							</template>
						</view>
						<view class="target-title target-title1">90天收益率</view>
					</view>
					<view class="target-item">
						<view class="target-num target-num2">{{item.maxDrawdown || 0}}%</view>
						<view class="target-title target-title2">最大回撤</view>
					</view>
					<view class="target-item">
						<view class="target-num target-num3">{{item.openingFunds || 0}}</view>
						<view class="target-title target-title3">开仓资金<text class="unit">(USDT)</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			datas: {
				type: Array,
				default: () => {
					return []
				}
			},
			// order：订单-当前订单；history：订单-历史订单；childNow-子账号当前订单；childHistory-子账号历史订单
			scene: {
				type: String,
				default: ""
			}
		},
		data() {
			return {

			};
		},
		methods: {
			handleDetail(item) {
				this.toPages('/pages/tabbar/order/detail?id=' + item.orderId)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-item-container {
		.product-name {
			font-weight: 600;
			font-size: 26rpx;
			line-height: 30rpx;
			color: $font-color;
		}

		.order-item-wrap {
			background-color: #ffffff;
			margin-bottom: 24rpx;
			padding: 20rpx 32rpx 32rpx 32rpx;

			.head-row {
				display: flex;
				align-items: center;

				.product-img {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					overflow: hidden;
					background-color: #343434;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.content-row {
				border: 1px solid #DBE0E6;
				border-radius: 12rpx;
				margin-top: 24rpx;

				.account-row {
					display: flex;
					background-color: #F5F7F8;
					border-radius: 12rpx;
					padding: 24rpx;
					border-bottom: 1px solid #DBE0E6;

					.user-avatar {
						width: 34rpx;
						height: 34rpx;
						border-radius: 50%;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.account-content {
						font-size: 24rpx;
						line-height: 28rpx;

						.account-txt {
							color: #26282B;
							padding-bottom: 8rpx;
						}

						.create-time {
							color: #A6ACB4;
						}
					}
				}

				.target-row {
					display: flex;
					align-items: center;
					justify-content: space-around;
					padding: 24rpx 0;

					.target-item {
						.target-num {
							font-size: 36rpx;
							line-height: 42rpx;
							font-weight: bold;
							color: #26282B;
						}

						.target-num1 {
							color: #06B070;
						}

						.target-title {
							font-size: 22rpx;
							line-height: 26rpx;
							color: #A6ACB4;
							padding-top: 8rpx;
						}

						.unit {
							color: #26282B;
						}
					}

				}
			}
		}
	}
</style>